<template>
  <div style="padding: 20px;">
    <div style="margin-bottom: 10px;">
      <el-button type="primary" size="mini" plain @click="()=>triggermodify()">新增</el-button>
    </div>
    <div>
      <!--  api 项目   -->
      <el-table :data="dataList" border size="mini">
        <el-table-column label="id">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column label="项目名称">
          <template slot-scope="scope">
             <el-button type="text" @click="()=>triggerintoproject(scope.row)">{{ scope.row.project_name }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="项目前缀">
          <template slot-scope="scope">
            {{ scope.row.prefix_url }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-popover
                placement="top-start"
                width="200"
                title="操作"
                trigger="hover"
            >
              <div>
                <el-button type="text" @click="()=>triggermodify(scope.row)">编辑</el-button>
                <el-button type="text" @click="()=>deletehanlder(scope.row)">删除</el-button>
              </div>
              <el-button slot="reference" type="text">操作</el-button>

            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import FormDialog from '@base/mydialogplus';

import axios from 'axios';
import { alertConfirm, alertWithPayload } from '@base/utils';

export default {
  data() {
    return {
      dataList: [],
    };
  },
  mounted() {
    this.initByDialog();
  },
  methods: {
    async initByDialog(_data) {
      this.getInfoList()
    },
    async getInfoList() {
      var datalistrs = await axios.post('/api/apiproject/list').then(res => res.data);
      var datalist = datalistrs && datalistrs.data || [];
      console.log('-> datalist', datalist);
      this.dataList = datalist;
    },
    async triggermodify(row) {
      var result=await FormDialog({
        title: row?.id?'编辑api项目':'新增api项目',
        data() {
          return { row: row };
        },

        components: {
          modify: () => import('@/views/manage/apismanage/apiproject/modify.vue'),
        },
      });
      if(result&&result.success){
        this.getInfoList()
      }
    },
    async triggerintoproject(row) {

    },
    async deletehanlder(row) {
    await alertConfirm('')
     var result=await axios.get(`/api/apiproject/debyid`,{
      params:{id:row?.id}
     }).then(res=>res.data)
     alertWithPayload(result);
     if(result&&result.success){
      this.getInfoList()
     }
    },

    async submitByDialog() {
      //validate
      //data operation
      //ajax 提交
      return { success: true };
    },
  },
};
</script>
